<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('自定义校验规则')}`">{{ $t('自定义校验规则') }}</t>
            <li>
                配置<span class="s-code">rules</span>可以自定义校验规则，详细用法参照
                <a class="d-code" href="https://github.com/yiminghe/async-validator" target="_blank">async-validator</a>
            </li>
            <li>
                <span class="s-code">rules</span>的配置有两种方式，第一种是通过<span class="d-code">Form</span>组件的属性
                <span class="s-code">rules</span>传入，另外一种是直接在控件对象内配置<span class="s-code">rules</span>
            </li>
        </template>
        <sib-form
            style="width: 500px;"
            :fields="fields"
            :rules="rules"
            @submit="submit">
        </sib-form>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const validator = (rule, val, callback) => {
            if (!/^[a-zA-Z0-9_]+$/.test(val)) {
                callback(new Error('只能包含字母、数字和下划线'));
                return;
            }
            callback();
        };

        const fields = ref([
            {
                label: '账号',
                code: 'account',
                type: 'text',
                maxlength: 30,
                required: true,
                // 可以为对象
                rules: { validator, trigger: 'blur' },
            },
            {
                label: '密码',
                code: 'password',
                type: 'password',
                required: true,
                // 也可以为数组
                rules: [{
                    min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: ['change', 'blur'],
                }],
            },
        ]);

        const rules = reactive({
            account: [
                // eslint-disable-next-line object-curly-newline
                { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: ['change', 'blur'] },
            ],
        });

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return {
            fields,
            rules,
            submit,
            templateString: `<template>
    <sib-form :fields="fields" :rules="rules" @submit="submit" style="width: 500px;"></sib-form>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const validator = (rule, val, callback) => {
            if (!/^[a-zA-Z0-9_]+$/.test(val)) {
                callback(new Error('只能包含字母、数字和下划线'));
                return;
            }
            callback();
        };

        const fields = ref([
            {
                label: '账号',
                code: 'account',
                type: 'text',
                maxlength: 30,
                required: true,
                // 可以为对象
                rules: { validator, trigger: 'blur' },
            },
            {
                label: '密码',
                code: 'password',
                type: 'password',
                required: true,
                // 也可以为数组
                rules: [{
                    min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: ['change', 'blur'],
                }],
            },
        ]);

        const rules = reactive({
            account: [
                // eslint-disable-next-line object-curly-newline
                { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: ['change', 'blur'] },
            ],
        });

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return { fields, rules, submit };
    },
};
<\/script>`,
        };
    },
};
</script>
